<template>
  <el-row class="home-dashboard" :gutter="20" justify="space-between">
    <!-- 统计卡片 -->
    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" v-for="(stat, index) in stats" :key="index">
      <el-card class="stat-card mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div class="stat-content flex justify-between items-center">
              <div class="icon-wrapper" :style="{ background: stat.bgColor }">
                <Icon :size="40" :icon="stat.icon" style="color: white;" />
              </div>
              <div class="text-wrapper text-right">
                <div class="text-title">{{ stat.title }}</div>
                <CountTo
                  :duration="2600"
                  :end-val="stat.value"
                  :start-val="0"
                  class="text-value"
                />
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>

    <!-- 工单趋势图 -->
    <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <h3 class="chart-title">工单趋势</h3>
        <el-skeleton :loading="loading" :rows="4" animated>
          <Echart :height="300" :options="lineOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>

    <!-- 工单类型分布 -->
    <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <h3 class="chart-title">工单类型分布</h3>
        <el-skeleton :loading="loading" animated>
          <Echart :height="300" :options="pieOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>

    <!-- 最新工单列表 -->
    <el-col :span="24">
      <el-card class="mb-20px" shadow="hover">
        <h3 class="chart-title">最新工单</h3>
        <el-skeleton :loading="loading" :rows="4" animated>
          <el-table :data="latestApprovals" border stripe style="width: 100%">
            <el-table-column prop="id" label="工单编号" width="120" />
            <el-table-column prop="name" label="申请人" width="120" />
            <el-table-column prop="department" label="部门" width="120" />
            <el-table-column prop="time" label="提交时间" width="160" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="row.status === '已完成' ? 'success' : row.status === '处理中' ? 'warning' : 'info'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { set } from "lodash-es";
import { EChartsOption } from "echarts";
import * as echarts from 'echarts';
import { useDesign } from "@/hooks/web/useDesign";
import { checkStatus, getAuthUrl } from "@/api/login";
import { ElMessageBox } from "element-plus";

const { t } = useI18n();
const loading = ref(true);
const { getPrefixCls } = useDesign();
const prefixCls = getPrefixCls("panel");

// 修改统计卡片数据 - 更新为工单相关的统计
const stats = reactive([
  {
    title: "今日工单",
    value: 156,
    icon: "ep:tickets", 
    bgColor: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
  },
  {
    title: "处理中",
    value: 23,
    icon: "ep:timer", 
    bgColor: "linear-gradient(135deg, #2af598 0%, #009efd 100%)",
  },
  {
    title: "已完成",
    value: 1280,
    icon: "ep:circle-check", 
    bgColor: "linear-gradient(135deg, #f6d365 0%, #fda085 100%)",
  },
  {
    title: "待处理",
    value: 18,
    icon: "ep:warning", 
    bgColor: "linear-gradient(135deg, #5ee7df 0%, #b490ca 100%)",
  },
]);

// 修改折线���配置
const lineOptionsData = reactive<EChartsOption>({
  tooltip: {
    trigger: "axis",
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: 'rgba(0, 0, 0, 0.05)',
    textStyle: {
      color: '#666'
    },
    shadowColor: 'rgba(0, 0, 0, 0.05)',
    shadowBlur: 10
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: { 
    type: "category",
    boundaryGap: false,
    data: [],
    axisLine: {
      lineStyle: {
        color: '#ddd'
      }
    },
    axisLabel: {
      color: '#666'
    }
  },
  yAxis: { 
    type: "value",
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#eee',
        type: 'dashed'
      }
    }
  },
  series: []
});

// 修改饼图配置 - 更新为工单类型分布
const pieOptionsData = reactive<EChartsOption>({
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: 'rgba(0, 0, 0, 0.05)',
    textStyle: {
      color: '#666'
    }
  },
  legend: {
    orient: 'vertical',
    right: '5%',
    top: 'center',
    textStyle: {
      color: '#666'
    }
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['40%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '14',
          fontWeight: 'bold'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      data: [
        { value: 335, name: '系统问题' },
        { value: 310, name: '业务咨询' },
        { value: 234, name: '权限申请' },
        { value: 135, name: '账号配置' },
        { value: 148, name: '其他' }
      ]
    }
  ]
});

// 最新工单列表
const latestApprovals = reactive([
  { id: "W2024001", name: "张三", department: "技术部", time: "2024-03-15 14:00", status: "处理中" },
  { id: "W2024002", name: "李四", department: "人事部", time: "2024-03-15 13:45", status: "已完成" },
  { id: "W2024003", name: "王五", department: "财务部", time: "2024-03-15 13:30", status: "待处理" },
]);

// 数据趋势
const getDataTrend = async () => {
  // 模拟7天的工单数据
  const data = [
    { time: "周一", value: 35 },
    { time: "周二", value: 45 },
    { time: "周三", value: 55 },
    { time: "周四", value: 40 },
    { time: "周五", value: 50 },
    { time: "周六", value: 30 },
    { time: "周日", value: 25 },
  ];
  
  set(lineOptionsData, "xAxis.data", data.map((v) => v.time));
  set(lineOptionsData, "series", [
    {
      name: "工单趋势",
      type: "line",
      smooth: true,
      data: data.map((v) => v.value),
      symbolSize: 8,
      showSymbol: false,
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#36a3f7' },
          { offset: 1, color: '#36a3f7' }
        ])
      },
      areaStyle: {
        opacity: 0.3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#36a3f7' },
          { offset: 1, color: 'rgba(54,163,247,0.1)' }
        ])
      },
      emphasis: {
        focus: 'series'
      }
    }
  ]);
};

// 初始化所有数据
const getAllApi = async () => {
  try {
    await Promise.all([getDataTrend()]);
  } catch (error) {
    console.error('Failed to get data:', error);
  } finally {
    loading.value = false;
  }
};

// 获取授权状态
const getAuthStatus = async () => {
  try {
    const res = await checkStatus()
    if (res.isAuthorized === false) {
      ElMessageBox.alert('需要授权才能使用完整服务哦！', '系统提示', {
        confirmButtonText: '去授权',
        showClose:false,
        callback: async () => {
            const url = await getAuthUrl()
            setInterval(() => {
              window.open(url)
            }, 500);
        },
      })
    }
  } catch (error) {
    console.error('Failed to get data:', error);
  } finally {
    loading.value = false;
  }
} 

onMounted(() => {
  getAllApi();
  getAuthStatus();
});
</script>

<style lang="scss" scoped>
$prefix-cls: 'home-dashboard';

// 添加数据加载动画
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.#{$prefix-cls} {
  .stat-card {
    padding: 20px;
    border: 1px solid rgb(0 0 0 / 5%);
    border-radius: 12px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
      
      .icon-wrapper {
        transform: scale(1.1);
      }
    }
  }

  .stat-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .icon-wrapper {
    position: relative;
    display: flex;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 16px;
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
    
    &::after {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 0%) 100%);
      content: '';
      transition: 0.5s;
    }
    
    &:hover::after {
      left: 100%;
    }
  }

  .text-wrapper {
    flex: 1;
    margin-left: 15px;
  }

  .text-title {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }

  .text-value {
    font-size: 24px;
    font-weight: 600;
    color: transparent;
    background: linear-gradient(45deg, var(--el-color-primary), var(--el-color-primary-light-3));
    background-clip: text;
  }

  .chart-title {
    position: relative;
    padding-left: 12px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    
    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 4px;
      height: 16px;
      background: var(--el-color-primary);
      border-radius: 2px;
      content: '';
      transform: translateY(-50%);
    }
  }

  .el-card {
    border: 1px solid rgb(0 0 0 / 5%);
    border-radius: 12px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
    }
  }

  // 表格样式优化
  .el-table {
    overflow: hidden;
    border-radius: 8px;
    
    th {
      background-color: var(--el-color-primary-light-9) !important;
    }
    
    td {
      padding: 12px 0;
    }
    
    tr {
      transition: all 0.3s ease;
      
      &:hover > td {
        background-color: var(--el-color-primary-light-9) !important;
      }
    }
  }
}

:deep(.el-skeleton) {
  position: relative;
  overflow: hidden;
  
  &::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
      rgb(255 255 255 / 0%) 0%, 
      rgb(255 255 255 / 30%) 50%, 
      rgb(255 255 255 / 0%) 100%);
    content: '';
    animation: shimmer 2s infinite;
  }
}
</style>
